<template>
	<view class="Jy_customer_home_page" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<!-- 下拉刷新组件 -->
		<refresh ref="refresh" @isRefresh="isRefresh"></refresh>
		<view class="Jy_customer_home_top_group" :style="{ 'padding-top': statusBarHeight + 'px' }">
			<view class="Jy_customer_home_top_box">
				<!-- 顶部Logo -->
				<view class="Jy_customer_home_logo_box">
					<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/logo.png" mode="aspectFill"></image>
				</view>
				<view class="Jy_customer_home_location_group">
					<view class="Jy_customer_home_location_box" @click="getLocationOptionPage">
						<view class="Jy_customer_home_location_icon_group">
							<view class="Jy_customer_home_location_icon_box">
								<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/location.png" mode="aspectFit"></image>
							</view>
						</view>
						<!-- 定位附近卖场的名称 -->
						<view class="Jy_customer_home_location_name_group">
							<view class="Jy_customer_home_location_name_box">
								<text>{{ locationName }}</text>
							</view>
						</view>
						<view class="Jy_customer_home_location_more_group">
							<view class="Jy_customer_home_location_more_box">
								<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/down_arrow.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="Jy_customer_home_main_content_group"
			:style="{ 'padding-top': 'calc(76rpx + ' + statusBarHeight + 'px)' }">
			<view class="Jy_customer_home_main_content_box">
				<scroll-view scroll-y="true" :style="{ 'height' : 'calc(100vh - 76rpx - ' + statusBarHeight +'px)'}"
					@scroll="getHomeScroll" :scroll-top="scrollTop" scroll-with-animation="true">
					<!-- 虚拟搜索框 -->
					<view class="Jy_home_serach_group">
						<view class="Jy_home_serach_box">
							<view class="serach" @click="getSerachPage">
								<view class="serach_icon_box">
									<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/serach_icon.png" mode="aspectFit"></image>
								</view>
								<view class="serach_text_box">
									<text>请输入你要搜索的好物</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 首页轮播图 -->
					<view class="Jy_home_swiper_group">
						<view class="Jy_home_swiper_box">
							<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" :circular="true"
								@change="getMainSwiperChange">
								<swiper-item v-for="(item, index) in mainSwiperList" :key="index">
									<view class="swiper-item">
										<image :src="item.imgUrl" mode="aspectFill"></image>
									</view>
								</swiper-item>
							</swiper>
						</view>
						<view class="swiper_dot_group">
							<view class="swiper_dot_box">
								<view :class="mainSwiperIndex === index ? 'liner_dot_ative' : 'liner_dot'"
									v-for="(item,index) in mainSwiperList.length" :key="index"></view>
							</view>
						</view>
					</view>

					<!-- 直播间预约/进入 -->
					<view class="Jy_liver_group">
						<view class="Jy_liver_box">
							<view class="liver_main_content_box" @click="">
								<view class="liver_poster_left_box">
									<image :src="liverPoster" mode="aspectFill"></image>
								</view>
								<view class="liver_right_main_content_group">
									<view class="liver_right_main_content_box">
										<view class="liver_title_group">
											<view class="liver_logo_box">
												<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/logo.png" mode="aspectFill"></image>
											</view>
											<view class="liver_title_box">
												<text>全屋定制</text>
											</view>
										</view>
										<view class="liver_yy_box mm_font">
											<text class="t1">点击预约直播间</text>
											<text class="liner"></text>
										</view>
										<view class="liver_fuli_title_box">
											<text>#惊喜大奖不错过!</text>
										</view>
										<view class="liver_time_group">
											<view class="liver_time_title_box">
												<text>直播时间</text>
											</view>
											<view class="liver_time_box">
												<text class="riq">2月17日</text>
												<text>15:00</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 装修灵感 -->
					<view class="Jy_home_fit_up_group">
						<view class="title_group">
							<view class="main_title mm_font">
								<text>装修灵感</text>
							</view>
							<view class="nav_title">
								<text>给家多一种选择</text>
							</view>
						</view>
						<view class="Jy_home_fit_up_box">
							<view class="Jy_home_fit_up_top_zx_group" @click="getInspirationJournal()">
								<view class="top_zx_image_box">
									<image src="https://img95.699pic.com/photo/50062/2141.jpg_wh860.jpg"
										mode="aspectFill"></image>
								</view>
								<view class="zx_content_group">
									<view class="qk_tag mm_font">
										<text class="ggl_title">第{{decorationJournal.journalNumber}}期</text>
									</view>
									<view class="title_box dd_font">
										<text>{{decorationJournal.journalName}}</text>
									</view>
									<view class="f_title_box">
										<text>{{decorationJournal.journalQuote}}</text>
									</view>
									<view class="q_all_tag_group">
										<view class="q_all_tag_box" v-for="(item, index) in decorationJournal.labelList"
											:key="index">
											<text>{{item.text}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="Jy_home_fit_up_bottom_bz_group">
								<view class="Jy_home_fit_up_bottom_bz_box" v-for="(item, index) in inspirationSteps"
									:key="index" @click="getTabbarGoodThing()">
									<view class="bz_container">
										<view class="bz_tag">
											<text>第{{index + 1}}步</text>
										</view>
										<view class="bz_image_box">
											<image :src="'http://120.78.177.187:8083/crmebimage/public/mpImage/home_lingan/image' + (index + 1) + '.png'"
												mode="aspectFill"></image>
										</view>
										<view :class="['bz_title_box', 'color_' + index, 'mm_font']">
											<text>{{item.title}}</text>
										</view>
										<view class="bz_f_title_box">
											<text>{{item.text}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 限时秒杀 -->
					<view class="Jy_skill_timer_group" v-if="seckillMerchandise.productList">
						<view class="Jy_skill_timer_box">
							<view class="title_group">
								<view class="sk-left-group">
									<view class="skill_icon_box">
										<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/skill_icon.png" mode="aspectFill"></image>
									</view>
									<view class="main_title mm_font">
										<text>限时秒杀</text>
									</view>
									<view class="nav_title">
										<text>好物享不停</text>
									</view>
								</view>
								<view class="sk-right-group">
									<view class="sk-right-box" @click="getSeckillVenue()">
										<text>GO</text>
										<u-icon name="arrow-right" color="#ffffff" size="13"></u-icon>
									</view>
								</view>
							</view>
							<view class="Jy_skill_main_content_group">
								<view class="Jy_skill_main_content_box">
									<view class="Jy_skill_shop_list1"
										v-for="(item, index) in seckillMerchandise.productList" :key="index">
										<view class="Jy_skill_shop_box" @click="getShopDetail(item)">
											<view class="Jy_skill_shop_image_box">
												<image :src="item.image" mode="aspectFill"></image>
											</view>
											<view class="price_group">
												<view class="top-container">
													<view class="skill_title_info_box">
														<text>{{item.title}}</text>
													</view>
													<view class="active_time-end-group">
														<view class="active_time-end-box">
															<text>秒杀倒计时</text>
														</view>
														<u-count-down :time="datatimes" format="HH:mm:ss" autoStart
															millisecond @change="onChange">
															<view class="time">
																<view class="time__custom">
																	<text
																		class="time__custom__item">{{ timeData.days>10?timeData.days:'0'+timeData.days}}</text>
																</view>
																<text class="time__doc">:</text>
																<view class="time__custom">
																	<text
																		class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
																</view>
																<text class="time__doc">:</text>
																<view class="time__custom">
																	<text
																		class="time__custom__item">{{ timeData.minutes }}</text>
																</view>
																<text class="time__doc">:</text>
																<view class="time__custom">
																	<text
																		class="time__custom__item">{{ timeData.seconds }}</text>
																</view>
															</view>
														</u-count-down>
													</view>
												</view>
												<view class="kc_number_box">
													<text>库存:</text>
													<text>{{item.stock || 0}}</text>
												</view>
												<view class="bottom-container">
													<view class="new_price">
														<view class="price_label_box">
															<text>抢购价</text>
														</view>
														<text class="smyal">￥</text>
														<text class="price_size">{{item.price.split('.')[0]}}</text>
														<text class="smyal">.{{item.price.split('.')[1]}}</text>
													</view>
													<view class="old_price">
														<text class="deline">￥{{item.otPrice}}</text>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 拼团砍价 -->
					<view class="Jy_pintuan_price_group">
						<view class="Jy_pintuan_price_box">
							<view class="title-group">
								<view class="group_icon_box">
									<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/group_icon.png" mode="aspectFit"></image>
								</view>
								<view class="main_title mm_font">
									<text>拼团砍价</text>
								</view>
								<view class="nav_title">
									<text>分享好友价更低</text>
								</view>
							</view>
							<view class="Jy_pintuan_main_content_group">
								<view class="Jy_pintuan_main_content_box">
									<view class="Jy_pintuan_shop_group" v-if="combinationList.length>0">
										<view :class=" false ? 'Jy_pintuan_shop_box' : 'Jy_pintuan_shop_box2'"
											@click="getGroupBargaining(0)">
											<view class="pingtuan_image_box">
												<image :src="combinationList[0].image" mode="aspectFill"></image>
											</view>
											<view class="pingtuan_zc_text_box mm_font">
												<text>{{combinationList[0].people}}人拼团</text>
												<!-- <text >3人砍价</text> -->
											</view>
											<view class="pingtuan_nav_text_box">
												<!-- <text >149元抢A类床品四件套</text> -->
												<text>{{combinationList[0].title}}</text>
											</view>
										</view>
									</view>
									<view class="Jy_pintuan_shop_group" v-if="bargainList.length>0">
										<view :class=" false ? 'Jy_pintuan_shop_box' : 'Jy_pintuan_shop_box2'"
											@click="getGroupBargaining(1)">
											<view class="pingtuan_image_box">
												<image :src="bargainList[0].image" mode="aspectFill"></image>
											</view>
											<view class="pingtuan_zc_text_box mm_font">
												<!-- <text >2人拼团</text> -->
												<text>{{bargainList[0].peopleNum}}人砍价</text>
											</view>
											<view class="pingtuan_nav_text_box">
												<!-- <text >149元抢A类床品四件套</text> -->
												<text>{{bargainList[0].title}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>


					<!-- 会员俱乐部 -->
					<!-- <view class="Jy_member_club_group">
						<view class="Jy_pintuan_price_box">
							<view class="title-group">
								<view class="main_title">
									<text>会员俱乐部</text>
								</view>
								<view class="nav_title">
									<text>入会专属权益</text>
								</view>
							</view>
							<view class="Jy_pintuan_main_content_group">
								<view class="Jy_pintuan_main_content_box">
									<view class="left_meber_content_group">
										<view class="left_meber_content_box">
											<view class="top">
												<text>积分兑换好礼</text>
												<text>晒家享受福利</text>
											</view>
											<view class="bottom">
												<text>全场精美礼品任意兑换</text>
											</view>
										</view>
									</view>
									<view class="right_go_room_group">
										<view class="right_go_room_box">
											<text>点击入会</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view> -->

					<!-- 客餐厅灵感 -->
					<view v-for="(item,index) in categoryList" :key="index">
						<view class="Jy_living_room_group">
							<view class="Jy_pintuan_price_box">
								<view class="title-group">
									<view class="main_title mm_font">
										<text>{{item.name}}</text>
									</view>
									<view class="nav_title">
										<text></text>
									</view>
								</view>

								<!-- 客餐厅灵感内容 -->
								<view class="Jy_pintuan_main_content_group">
									<view class="Jy_pintuan_main_content_box">
										<view class="living_room_swiper_group">
											<swiper
												style="height: calc((100vw - 40rpx) / 2);border-radius: 10rpx; overflow: hidden;"
												class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000"
												:duration="500" :circular="true">
												<swiper-item v-for="(item, index) in mainSwiperList" :key="index">
													<view class="swiper-item">
														<image :src="item.imgUrl" mode="aspectFill"></image>
													</view>
												</swiper-item>
											</swiper>
										</view>
										<view class="living_room_nav_button_group">
											<view class="living_room_nav_button_box"
												v-for="(itemc, index) in item.child" :key="index"
												@click="getShoppingList(itemc)">
												<view class="living_room_nav_image_group">
													<view class="living_room_nav_image_box">
														<image :src="itemc.extra" mode="aspectFill"></image>
													</view>
												</view>
												<view class="living_room_nav_text_box">
													<text>{{itemc.name}}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 深睡卧室 -->
					<!-- <view class="Jy_bedroom_group">
						<view class="Jy_pintuan_price_box">
							<view class="title-group">
								<view class="main_title mm_font">
									<text>深睡卧室</text>
								</view>
								<view class="nav_title">
									<text>感知生活的温度</text>
								</view>
							</view>
							<view class="Jy_pintuan_main_content_group">
								<view class="Jy_pintuan_main_content_box">
									<view class="living_room_swiper_group">
										<swiper
											style="height: calc((100vw - 40rpx) / 2); border-radius: 10rpx; overflow: hidden;"
											class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000"
											:duration="500" :circular="true">
											<swiper-item v-for="(item, index) in mainSwiperList" :key="index">
												<view class="swiper-item">
													<image :src="item.imgUrl" mode="aspectFill"></image>
												</view>
											</swiper-item>
										</swiper>
									</view>
									<view class="living_room_nav_button_group">
										<view class="living_room_nav_button_box" v-for="(item, index) in 4" :key="index"
											@click="getShoppingList()">
											<view class="living_room_nav_image_group">
												<view class="living_room_nav_image_box">
												</view>
											</view>
											<view class="living_room_nav_text_box">
												<text>布床系列</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view> -->

					<!-- 顾家门店 -->
					<view class="Jy_look_family_store_group">
						<view class="Jy_pintuan_price_box">
							<view class="title-group">
								<view class="main_title mm_font">
									<text>英郎门店</text>
								</view>
								<view class="nav_title">
									<text>总有一家在你身边</text>
								</view>
							</view>
							<view class="Jy_pintuan_main_content_group">
								<view class="Jy_pintuan_main_content_box">
									<view class="Jy_look_family_card_group">
										<view class="Jy_look_family_card_image_box">
											<image :src="liverPoster" mode="aspectFill"></image>
										</view>
										<view class="Jy_look_family_card_content_group">
											<view class="Jy_look_family_card_number_box">
												<text>品牌专卖店</text>
											</view>
											<view class="Jy_look_family_card_selcet_box" @click="getOfflineStores()">
												<text>查看线下门店</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 版权海报 -->
					<view class="Jy_copy_poster_group">
						<view class="Jy_copy_poster_box">
							<image :src="liverPoster" mode="widthFix"></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 返回顶部 -->
		<view class="back_top_group" v-if="oldScrollTop > 600">
			<view class="back_top_box" @tap="getBackTop">
				<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/top.png" mode="aspectFill"></image>
			</view>
		</view>

		<!-- 登录按钮 -->
		<view class="back_top_group1">
			<view class="back_top_box" @tap="getLogin">
				<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/login.png" mode="aspectFill"></image>
			</view>
		</view>

		<!-- 获取定位权限通知 -->


	</view>
</template>

<script>
	// 下拉刷新组件
	import refresh from '../../../components/refresh.vue';
	import {
		seckillShopapi
	} from '../../../api/home.js';

	export default {
		components: {
			refresh
		},
		data() {
			return {
				// 适配头部导航高度
				statusBarHeight: getApp().globalData.statusBarHeight,
				// 定位的地址
				locationName: '英郎总部商城',
				// 主轮播下标
				mainSwiperIndex: 0,
				// 主轮播数据
				mainSwiperList: [{
						imgUrl: 'https://img95.699pic.com/photo/50088/5720.jpg_wh860.jpg'
					},
					{
						imgUrl: 'https://img95.699pic.com/photo/50062/2141.jpg_wh860.jpg'
					},
					{
						imgUrl: 'https://img95.699pic.com/photo/50052/5770.jpg_wh860.jpg'
					}
				],
				// 直播间封面地址
				liverPoster: 'https://img95.699pic.com/photo/50036/1589.jpg_wh860.jpg',
				// 装修灵感内容
				decorationJournal: {
					journalNumber: '十二',
					journalName: '毛孩子的家毛孩子的家毛孩子的家',
					journalQuote: '#就该这么装',
					labelList: [{
							text: '夫妻二人'
						},
						{
							text: '餐厅独立'
						},
						{
							text: '宠物狗狗'
						}
					]
				},
				// 装修灵感步骤
				inspirationSteps: [{
						title: '买房等房',
						text: '选房验房 户型选配',
					},
					{
						title: '拿房攻略',
						text: '装修干货 避雷指南',
					},
					{
						title: '装房不愁',
						text: '家居定制 软装搭配',
					},
					{
						title: '住房无忧',
						text: '英郎关爱 环保生活',
					}
				],
				// 秒杀时间
				timeData: {},
				// 秒杀商品Data
				seckillMerchandise: {},
				scrollTop: 0,
				oldScrollTop: 0,
				categoryList: [],
				bargainList: [],
				combinationList: [],
				datatimes: 0, // 秒杀倒计时
			};
		},
		onLoad() {
			this.getIndex();
		},
		onShow() {

		},
		// tabbar 按钮被点击
		onTabItemTap(e) {
			// 播放音效
			this.music.play_dede()
		},
		methods: {
			// 获取首页数据
			getIndex() {
				// 获取轮播图
				this.sendRequest({
					url: "/api/front/index",
					success: (res) => {
						this.mainSwiperList = this.mainSwiperList.concat(res.data.data.banner)
					}
				});

				// 获取秒杀商品
				this.sendRequest({
					url: "/api/front/seckill/index",
					success: res => {
						this.seckillMerchandise = res.data.data;
						let datatime2 = this.gettimes(res.data.data.secKillResponse.timeSwap2);
						let datatime = datatime2 - Date.now(); //时间差的毫秒数
						this.datatimes = datatime

					}
				})

				// 获取砍价商品
				this.sendRequest({
					url: "/api/front/bargain/index",
					success: res => {
						this.bargainList = res.data.data.productList;
					}
				})

				// 获取拼团商品
				this.sendRequest({
					url: "/api/front/combination/index",
					success: res => {
						this.combinationList = res.data.data.productList;
					}
				})

				// 获取分类
				this.sendRequest({
					url: "/api/front/category",
					success: res => {
						this.categoryList = res.data.data;
					}
				})
			},

			gettimes(date) {
				date = date.substring(0, 19);
				var timestamp = new Date(date).getTime();
				return timestamp;
			},
			// 页面下拉刷新函数
			isRefresh() {
				setTimeout(() => {
					uni.showToast({
						icon: 'success',
						title: '刷新成功'
					});
					this.$refs.refresh.endAfter(); //刷新结束调用
				}, 1000);
			},
			// 刷新touch监听
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			// 获取首页轮播图下标
			getMainSwiperChange(e) {
				this.mainSwiperIndex = e.detail.current;
			},
			// 跳转到搜索页面
			getSerachPage() {
				uni.navigateTo({
					url: '/pages/main/customerSerach/customerSerach'
				})
			},
			// 跳转到商品列表页面
			getShoppingListPage() {
				uni.navigateTo({
					url: '/pagesH/main/customerHome/shoppingList/shoppingList'
				})
			},
			// 跳转到地址选择页面
			getLocationOptionPage() {
				uni.navigateTo({
					url: '/pagesH/main/customerHome/locationOption/locationOption'
				})
			},
			// 跳转到装修灵感详情页
			getInspirationJournal() {
				uni.navigateTo({
					url: '/pagesH/main/customerHome/inspirationJournal/inspirationJournal'
				})
			},
			// 跳转到找好物
			getTabbarGoodThing() {
				uni.reLaunch({
					url: '/pages/main/customerGoodThing/customerGoodThing?index=1'
				})
			},
			// 跳转到商品详情
			getShopDetail(item) {
				uni.navigateTo({
					url: '/pages/shoppingDetail/shoppingSecckillDetail?seckillId=' + item.id
				})
			},
			// 秒杀倒计时变化 
			onChange(e) {
				this.timeData = e
			},
			// 跳转到拼团 / 砍价活动专属页
			getGroupBargaining(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pagesH/main/customerHome/groupBargaining/groupBargaining?index=' + index
					})
				} else {
					uni.navigateTo({
						url: '/pagesH/main/customerHome/combinationDetail/combinationDetail?index=' + index
					})
				}

			},
			// 进入秒杀会场
			getSeckillVenue() {
				uni.navigateTo({
					url: '/pagesH/main/customerHome/seckillVenue/seckillVenue'
				})
			},
			// 跳转到商品列表页
			getShoppingList(itemc) {
				uni.navigateTo({
					url: '/pagesH/main/customerHome/shoppingList/shoppingList?cid=' + itemc.id
				})
			},
			// 查看线下门店
			getOfflineStores() {
				uni.navigateTo({
					url: '/pages/offlineStores/offlineStores'
				})
			},
			// 获取页面滚动条距离顶部的距离
			getHomeScroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
			},
			// 点击返回顶部按钮
			getBackTop() {
				this.scrollTop = this.oldScrollTop;
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			// 跳转到登录页面
			getLogin() {
				uni.navigateTo({
					url: '/pagesA/main/customerMyCenter/userWechatLogin/userWechatLogin'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import 'customerHome.scss';
</style>
